/* eslint-disable import/no-import-module-exports */
//  index.js: webpack入口起点文件

/*
  1.运行指令：
  开发坏境：webpack ./src/index.js -o ./build --mode=development
    webpack会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./build
    整体打包坏境是开发坏境
  生产坏境：webpack ./src/index.js -o ./build --mode=production
    webpack会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./build
    整体打包坏境是生产坏境

  2.结论：
    1.webpack能处理js/json,不能处理css,img等其他资源
    2.生产坏境和开发坏境将ES6模块化编译成浏览器能识别的模块化
    3.成产坏境比开发坏境多一个压缩js代码
*/
// import '@babel/polyfill'
import '../css/index.css';
import '../css/index.less';
import '../font/iconfont.css';
// import print from './print';
import $ from 'jquery';

console.log($, '$$$$$$$');
// import data from './data.json'
// console.log(data);

console.log('webpack~~');

// print()

//  通过js代码，让某个文件单独打包成一个chunk
// import('./print').then((res) => {
//   res.default()
// }).catch(() => {
//   console.log('wrong');
// })
if (module.hot) {
  //  一旦module.hot为true，说明开启了HMR功能 -->让HMR功能生效
  module.hot.accept('./print.js', () => {
    //  方法会监听print.js文件的变化，一旦发生变化，其他默认不会重新打包构建
    //  会执行后面的回调函数
    // print()
  })
}
// $('.title').click(() => {
//   console.log(1);
// });

const promise = new Promise((resolve) => {
  setTimeout(() => {
    console.log('定时器执行完毕')
    resolve()
  }, 1000)
})
console.log(promise)

// eslint-disable-next-line func-names
document.getElementById('btn').onclick = function () {
  //  懒加载：挡在文件需要使用时才加载
  //  预加载：prefetch:会在使用前，提前加载js文件
  //  正常加载可以认为是并行加载（同一时间加载多个文件）
  //  预加载prefetch是等其他资源加载完毕，浏览器空闲了再偷偷加载资源
  import(/* webpackPrefetch: true */'./print').then(({ lazy }) => {
    lazy();
  })
}

//  注册serviceworker
//  处理兼容性问题
//  SW代码必须运行在服务器上
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker
      .register('/service-worker.js')
      .then(() => {
        console.log('sw注册成功~');
      })
      .catch(() => {
        console.log('sw注册失败~');
      })
  })
}
